<template>
  <div class="matron-details">
    <van-nav-bar left-text="家政平台" left-arrow @click-left="$router.back()" :border="border" class="top"/>
    <div class="matron-blue"></div>
    <!-- 个人信息 -->
    <div class="matron-xiangq">
      <van-row>
        <van-col span="24" class="matron-xiangq-s">
          <van-row type="flex" justify="space-around">
            <van-col span="6">
              <van-image width="77" height="72" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            </van-col>
            <van-col span="13" class="oll">
              <h3>{{matronList.name}}</h3>
              <van-button color="#3F51B5" plain round size="mini">{{matronList.star}}</van-button>
              <p>{{matronList.site}}&nbsp;|&nbsp;{{matronList.age}}岁&nbsp;|&nbsp;{{matronList.suffer}}</p>
            </van-col>
            <van-col span="5" class="ddd">
              <van-button color="#3F51B5" round size="mini">关注</van-button>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="24" class="matron-xiangq-z">
          <p>注册公司：湖南前海优家网络科技有限公司</p>
          <p>职业：{{matronList.career}}</p>
        </van-col>
        <van-col span="24" class="matron-xiangq-x">
          <van-row type="flex">
            <van-col span="16"><div><van-icon name="certificate" color="#3F51B5"/> <span>身份信息已核实</span></div></van-col>
            <van-col span="7">
              <van-button color="#3F51B5" plain round size="mini" :block="true">电话联</van-button>
              <van-button color="#3F51B5" plain round size="mini" :block="true" class="button">微信联</van-button>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <!-- 主要技能 -->
    <van-collapse v-model="activeNames" class="matron-skill">
      <van-collapse-item  name="1" :border="false">
        <template #title>
          <div><span></span>主要技能</div>
        </template>
          <button v-for="(item, index) in matronList.skill" :key="index">{{item}}</button>
      </van-collapse-item>
      <van-collapse-item  name="2" :border="false">
        <template #title>
          <div><span></span>个人简介</div>
        </template>
        <p>{{matronList.resume}}</p>
      </van-collapse-item>
      <van-collapse-item  name="3" :border="false">
        <template #title>
          <div><span></span>个人简介</div>
        </template>
        <p>任职公司:湖南前海优家网络科技有限公司</p>
        <p>籍贯民族:{{matronList.nation}}</p>
        <p>生肖属相:{{matronList.zodiac}}</p>
        <p>星座:摩羯座(12.22~1.19)</p>
        <p>出生日期:{{matronList.birth}}</p>
        <p>学历:{{matronList.education}}</p>
      </van-collapse-item>
      <van-collapse-item name="4" :border="false">
        <template #title>
          <div><span></span>证件信息</div>
        </template>
        <van-grid :column-num="3" :border="false">
          <van-grid-item><van-image src="https://img01.yzcdn.cn/vant/cat.jpeg" width="100px" height="74px" /></van-grid-item>
          <van-grid-item><van-image src="https://img01.yzcdn.cn/vant/cat.jpeg" width="100px" height="74px" /></van-grid-item>
          <van-grid-item><van-image src="https://img01.yzcdn.cn/vant/cat.jpeg" width="100px" height="74px" /></van-grid-item>
        </van-grid>
      </van-collapse-item>
      <van-collapse-item name="5" :border="false">
        <template #title>
          <div><span></span>证件信息</div>
        </template>
        <van-grid :column-num="3" :border="false">
          <van-grid-item><van-image src="https://img01.yzcdn.cn/vant/cat.jpeg" width="100px" height="74px" /></van-grid-item>
          <van-grid-item><van-image src="https://img01.yzcdn.cn/vant/cat.jpeg" width="100px" height="74px" /></van-grid-item>
          <van-grid-item><van-image src="https://img01.yzcdn.cn/vant/cat.jpeg" width="100px" height="74px" /></van-grid-item>
        </van-grid>
      </van-collapse-item>
    </van-collapse>
    <!-- 底部 -->
    <van-tabbar>
      <van-tabbar-item color="#979191" icon="smile-comment">评价</van-tabbar-item>
      <van-tabbar-item color="#979191" icon="share">分享</van-tabbar-item>
      <van-tabbar-item color="#979191" icon="wechat">微信联系</van-tabbar-item>
      <van-tabbar-item color="#979191" icon="phone">电话联系</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getMatronById } from '@/api/home'

export default {
  name: 'MatronDetails',
  components: {},
  props: {
    matronId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      border: false, // 是否显示下边框
      activeNames: ['1', '2', '3', '4', '5'], // 主要技能那一块是否展开
      matronList: {} // 人员详情
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadMatronId()
  },
  mounted () {},
  methods: {
    async loadMatronId () {
      try {
        const { data } = await getMatronById(this.matronId)
        this.matronList = data
        console.log(this.matronList)
      } catch (err) {
        console.log('请求错误', err)
      }
    }
  }
}
</script>
<style scoped lang='less'>
.top{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
}
.matron-details {
  padding-top: 46px;
    background-color: #F8F8F8;
  /deep/.van-nav-bar__content {
    background-color: #3F51B5;
      /deep/.van-nav-bar__left {
        font-size: 16px;
        font-weight: bold;
      }
      /deep/.van-nav-bar__text {
        color: #fff;
      }
  }
  /deep/.van-nav-bar .van-icon {
    color: #fff;
  }

  .matron-blue {
    height: 44px;
    background-color: #3F51B5;
  }

  .matron-xiangq {
    margin: -26px 17px 20px 17px;
    padding-left: 13px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    .oll {
      padding-left: 5px;
      /deep/.van-button {
        top: -4px;
        margin-bottom: 5px;
      }
    }
    .ddd {
      .van-button {
        top: -10px;
      }
      /deep/.van-button--mini {
        padding: 0 12px;
      }
    }
    .matron-xiangq-s {
      margin-top: 12px;
      margin-bottom: 5px;
      h3 {
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
      }
      p {
        margin: 0;
        font-size: 12px;
        color: #979191;
      }
    }
  }

  .matron-xiangq-z {
    p {
        margin: 0;
        font-size: 12px;
        line-height: 25px;
        color: #979191;
    }
  }
  .matron-xiangq-x {
      line-height: 50px;
      margin-bottom: 13px;
    span {
      font-size: 14px;
      color: #101010;
    }
    .van-icon {
      top: 7px;
    }
    .button{
      margin: 8px 0 0 -1px;
    }
  }

  .matron-skill {
    margin: 0 18px 25px 18px;
    span {
      width: 4px;
      height: 14px;
      display: inline-block;
      background-color: #3F51B5;
      margin: 0px 10px 0 0;
      position: relative;
      top: 3px;
    }
    button {
      height: 24px;
      line-height: 24px;
      text-align: center;
      border: 1px solid #3F51B5;
      box-sizing: border-box;
      color: #3F51B5;
      padding: 0 5px;
      border-radius: 20px;
      font-size: 10px;
      background-color: #fff;
      margin:0 16px 9px 16px;
    }
    p {
      font-size: 12px;
      color: #7B7777;
      padding: 0 0 0 10px;
      line-height: 25px;
      margin: 0;
    }
  }
  /deep/.van-grid-item__content {
    padding: 0;
  }
}
</style>
